<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SockJS+Stomp</title>
<script src="./__/import.js"></script>
<style type="text/css">
html, body, .container {
	height: 100%;
}

#console {
	width: 80%;
	margin-top: 10px;
	height: calc(100% - 300px);
	padding: 10px;
	overflow-y: scroll;
	border: #ccccff solid 1px;
}

#message {
	border: #ccccff solid 1px;
	width: 300px;
	height: 50px;
}

dl {
	padding-left: 14px;
}

dt {
	float: left;
	font-weight: bold;
	padding: 12px 0 4px;
	width: 90px;
}

dd {
	text-align: left;
	height: auto;
	padding: 8px 0;
}

input, select {
	vertical-align: middle;
	color: #333333;
	background: #ffffff;
	border: #ccccff solid 1px;
}

textarea {
	line-height: 150%;
	overflow: auto
}

button {
	border: #ccccff solid 1px;
	height: 22px;
}
</style>
</head>
<body>
	<div class="container">
		<div>
			<!--  -->
			<label> User：<input type="text" id="from" value="root" /></label>
			<!--  -->
			<label> Topic :<input id="topic" type="text" value="hello"></label>
			<button id="connect">connect</button>
			<button id="disconnect">disconnect</button>
			<button id="clear">clear</button>
		</div>
		<textarea id="console" readonly="readonly"></textarea>
		<div>
			<dl>
				<dt>
					<label for="message">MESSAGE: </label>
				</dt>
				<dd>
					<textarea id="message"></textarea>
				</dd>
				<dt>
					<label for="to"> TO :</label>
				</dt>
				<dd>
					<input id="to" type="text" value="*">
				</dd>
				<dt></dt>
				<dd>
					<button id="send" disabled="disabled">send</button>
				</dd>
			</dl>
		</div>
	</div>
</body>
<script>
	var EL = {
		connect : document.querySelector('#connect'),
		disconnect : document.querySelector('#disconnect'),
		clear : document.querySelector('#clear'),
		console : document.querySelector('#console'),
		message : document.querySelector('#message'),
		topic : document.querySelector('#topic'),
		from : document.querySelector('#from'),
		to : document.querySelector('#to'),
		send : document.querySelector('#send')
	}, Option = {
		url : __.ctx + '/ws',
		
	headers : {}
	}, Engine = {
		client : null
	}, FN = {
		consume : function(event) {
			EL.console.value = EL.console.value + event.body + '\n';
			EL.console.scrollTop = EL.console.scrollHeight
		},
		token : function(token) {
			document.cookie = 'Access-Token=' + escape(token) + ";expires=" + new Date(new Date().getTime() + 15000).toGMTString();
		},
		connect : function() {
			FN.disconnect();

			var topic = EL.topic.value;
			var from = EL.from.value;

			FN.token(from);

			var socket = new SockJS(Option.url);
			var client = Engine.client = Stomp.over(socket);
			//client.debug = null
			client.connect(Option.headers, function() {
				client.subscribe('/' + topic, FN.consume, Option.headers);
				client.subscribe('/user/' + from + '/' + topic, FN.consume, Option.headers);
				EL.send.disabled = false;
				EL.topic.disabled = true;
				EL.from.disabled = true;
			}, function(e) {
				Engine.client = null;
			});
		},
		disconnect : function() {
			if (Engine.client != null) {
				Engine.client.disconnect();
			}
			Engine.client = null;
			EL.send.disabled = true
			EL.topic.disabled = false;
			EL.from.disabled = false;
		},
		clear : function() {
			EL.console.value = '';
		},
		send : function(payload) {
			if (Engine.client != null || !payload) {
				Engine.client.send('/~', Option.headers, JSON.stringify(payload));
			}
		}
	}
	EL.send.disabled = true;
	EL.connect.addEventListener('click', function() {
		FN.connect();
	}, false);
	EL.disconnect.addEventListener('click', function() {
		FN.disconnect();
	}, false);
	EL.clear.addEventListener('click', function() {
		FN.clear();
	}, false);
	EL.send.addEventListener('click', function() {
		var payload = {};
		payload.topic = EL.topic.value;
		payload.message = EL.message.value;
		payload.from = EL.from.value;
		payload.to = EL.to.value;
		FN.send(payload);
	}, false);
</script>
</body>
</html>